<template>
  <div class="order-component">
    <mt-cell class="waste" title="废旧电视机" :label="'￥'+item.price" v-for="(item,index) in items" :key="index">
      <!--<mt-palette-button class="plus" content="+"></mt-palette-button>-->
      <mt-button class="waste-btn" size="small" type="default" @click="numDecs(index)" v-show="item.num>0">-</mt-button>
      <span class="waste-num" v-show="item.num>0">{{ item.num }}</span>
      <mt-button class="waste-btn" size="small" type="primary" @click="numIncs(index)">+</mt-button>
    </mt-cell>
  </div>
</template>
<script>
export default {
  data(){
    return {
      items:[
        {
          price:300,
          num:3
        },
        {
          price:200,
          num:4
        },
        {
          price:100,
          num:5
        }
      ]
    }
  },
  props:['typeId'],
  methods:{
    numDecs(index){
      this.items[index].num--;
      let price = this.cotPrice();
      console.log(this.typeId);
      this.$emit('countPrice',price)
    },
    numIncs(index){
      this.items[index].num++;
      let price = this.cotPrice();
      this.$emit('countPrice',price)
    },
    cotPrice(){
      let price=0;
      this.items.forEach((item)=>{
        price = price + item.price*item.num;
      })
      return price;
    }
  }
}
</script>
<style scoped>
.order-component{

}
.waste {
  height: 60px;
  margin-top: 10px;
  margin-right: 10px;
  margin-bottom: 10px;
}
.waste-num{
  display: inline-block;
  margin-left: 8px;
  margin-right: 8px;
}
.waste-btn{
  border-radius: 50%;
}
</style>
